<template>
  <div class="goodItem" @click="itemClick">
    <div class="imgBox">
      <img v-lazy="showImg" alt="图片" @load="imgLoad">
    </div>
    <div class="title">{{goodItem.title}}</div>
    <div class="goodItemInfo">
      <span class="price">{{goodItem.price}}</span>
      <span class="iconfont iconOOjs_UI_icon_star"></span>
      <span>{{goodItem.cfav}}</span>
    </div>
  </div>
</template>

<script>
  import {itemImgLoad} from '@/bus/busName'
  export default {
    name: "GoodItem",
    props: {
      goodItem: {
        type: Object
      }
    },
    computed: {
      showImg(){
        return this.goodItem.image || this.goodItem.show.img
      }
    },
    methods:{
      imgLoad(){
        // 发送事件总线itemImgLoad
        this.$bus.$emit(itemImgLoad)
      },

      // 点击页面，跳转到详情页面
      itemClick(){
        this.$router.push({name: 'detail', params: {iid: this.goodItem.iid}})
      }
    }
  }
</script>

<style scoped>
  .goodItem{
    width: 50%;
    float: left;
    padding: 3px;
    font-size: 14px;
  }
  .goodItem .imgBox{
    width: 100%;
    height: calc(50vw * 1.3);
    border-radius: 10px;
    overflow: hidden;
  }
  .goodItem img{
    width: 100%;
    height: 100%;
  }
  .goodItem .title{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    height: 30px;
    line-height: 30px;
  }
  .goodItemInfo{
    text-align: center;
    height: 30px;
    line-height: 30px;
  }
  .goodItemInfo .price{
    color: var(--color-high-text)
  }
</style>
